<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修改文章</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/editor/css/editormd.min.css}"/>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <style>

    </style>
</head>
<body style="background-color: #FAFAFA">

<div id="app" class="layui-container" style="width: auto">

    <div class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/user-header.html::header('历史评论')"></div>

            <!--            评论-->
            <div id="comment" th:value="${comment.id}" class="layui-form" style="margin-top: 30px">
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">评论：</label>
                    <div class="layui-input-block">
                            <textarea id="content" th:text="${comment.content}" v-model="content"
                                      placeholder="请输入评论内容" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button v-on:click="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交
                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div th:insert="index.html::pageTail"></div>
</div>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/editor/editormd.min.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            id: document.getElementById('comment').getAttribute('value'),
            content: document.getElementById('content').textContent
        },
        methods: {
            submit: function () {
                var requestData = {
                    id: this.id,
                    content: this.content
                }
                axios.post('/comment/update', requestData).then(response => {
                    console.log(response)
                    if (response.data == '1')
                        layer.open({
                            title: '提示',
                            content: '修改成功！'
                        })
                })
            },

            checkNullAndSpace: function (text) {
                if (text == null || text.replace(/^\s+,""/).replace(/^\s+$/, "") == '')
                    return true
                else return false
            }
        }
    })
</script>

</body>
</html>